<template>
  <view class="contract-container">
    <!-- 固定头部区域 -->
    <view class="fixed-header">
      <!-- 顶部导航区域 -->
      <view class="top-nav-area">
        <!-- 借入/借出切换按钮 -->
        <view class="toggle-buttons">
          <view class="toggle-button" :class="{ active: loanType === 'borrower' }" @click="toggleLoanType('borrower')">
            借入</view>
          <view class="toggle-button" :class="{ active: loanType === 'lender' }" @click="toggleLoanType('lender')">借出
          </view>
        </view>

        <!-- 删除按钮 -->
        <!-- <view class="delete-btn">
          <u-icon name="trash" color="#fff" size="22"></u-icon>
        </view> -->
      </view>

      <!-- 选项卡导航 -->
      <scroll-view scroll-x class="tabs-nav" show-scrollbar="false">
        <view class="tab-item" :class="{ active: activeTab === tab.value }" v-for="(tab, index) in tabs" :key="index"
          @click="switchTab(tab.value)">{{ tab.name }}</view>
      </scroll-view>

      <!-- 排序区域 -->
      <view class="sort-area">
        <view class="sort-item" @click="sortBy('default')">
          <text>默认排序</text>
          <text class="arrow" :class="{ 'active': sortField === 'default' }">{{ sortField === 'default' ? (sortOrder ===
            'asc' ? '▲' : '▼') : '▼' }}</text>
        </view>
        <view class="sort-item" @click="sortBy('amount')">
          <text>金额</text>
          <text class="arrow" :class="{ 'active': sortField === 'amount' }">{{ sortField === 'amount' ? (sortOrder ===
            'asc' ? '▲' : '▼') : '↕' }}</text>
        </view>
        <view class="sort-item" @click="sortBy('createTime')">
          <text>起始日期</text>
          <text class="arrow" :class="{ 'active': sortField === 'createTime' }">{{ sortField === 'createTime' ?
            (sortOrder === 'asc' ? '▲' : '▼') : '↕' }}</text>
        </view>
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <view class="search-input">
          <u-icon name="search" size="30" color="#c0c4cc"></u-icon>
          <input type="text" v-model="formParams.queryName" placeholder="请输入要搜索的姓名" confirm-type="search"
            @confirm="search" />
        </view>
      </view>

      <!-- 合同统计信息 -->
      <view class="contract-stats">
        <view class="stats-item">
          <text class="stats-label">合同共</text>
          <text class="stats-value">{{ totalContract }}</text>
          <text class="stats-unit">张</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-item">
          <text class="stats-label">合同金额</text>
          <text class="stats-value">{{ totalAmount }}</text>
          <text class="stats-unit">元</text>
        </view>
      </view>
    </view>

    <!-- 内容区域 (包含顶部占位和可滚动内容) -->
    <view class="content-area">
      <!-- 顶部占位，与固定头部高度相同 -->
      <view class="header-placeholder" :style="{ height: headerHeight + 'px' }"></view>

      <!-- 可滚动的合同列表区域 -->
      <view class="scrollable-content" :style="{ height: scrollViewHeight }">
        <!-- 合同列表 -->
        <view class="contract-list">
          <!-- 加载中状态 -->
          <view class="loading-text" v-if="loading">
            <u-loading-icon mode="circle"></u-loading-icon>
            <text>加载中...</text>
          </view>

          <!-- 自定义空状态 -->
          <view class="empty-state" v-else-if="contracts.length === 0">
            <view class="empty-icon">
              <u-icon name="file-text" size="80" color="#d8d8d8"></u-icon>
            </view>
            <view class="empty-text">暂无合同数据</view>
          </view>

          <!-- 合同卡片列表 -->
          <view class="contract-cards" v-else>
            <view class="contract-card" v-for="(contract, index) in sortedContracts" :key="index">
              <view class="card-header">
                <view class="card-title">{{ loanType === 'borrower' ? '我欠TA' : 'TA欠我' }}<view
                    style="display: inline-block; color: #4080ff; font-size: 24rpx; border: 1px solid #4080ff; padding: 2px 5px; margin-left: 10rpx;"
                    v-if="contract.repaymentType === 1">分期</view>
                </view>
                <view class="card-status" style="background-color: #f62b2b; color: #fff;" :class="contract.statusClass" v-if="contract.status === 0">未签署</view> <!-- 未签署 -->
                <view class="card-status" style="background-color: #0cb458; color: #fff;" :class="contract.statusClass" v-if="contract.status === 1">已签署</view> <!-- 已签署 -->
                <view class="card-status" style="background-color: #4080ff; color: #fff;" :class="contract.statusClass" v-if="contract.status === 2">已生效</view> <!-- 已生效 -->
                <view class="card-status" style="background-color: #ff8c00; color: #fff;" :class="contract.statusClass" v-if="contract.status === 3">已逾期</view> <!-- 已逾期 -->
                <view class="card-status" style="background-color: #2e8b57; color: #fff;" :class="contract.statusClass" v-if="contract.status === 4">已还款</view> <!-- 已还款 -->
                <view class="card-status" style="background-color: #a9a9a9; color: #fff;" :class="contract.statusClass" v-if="contract.status === 5">已消条</view> <!-- 消条 -->
                <view class="card-status" style="background-color: #800080; color: #fff;" :class="contract.statusClass" v-if="contract.status === 6 && loanType === 'borrower'">待支付</view> <!-- 待支付 -->
                <view class="card-status" style="background-color: #0cb458; color: #fff;" :class="contract.statusClass" v-if="contract.status === 6 && loanType === 'lender'">已签署</view> 
              </view>
              <view class="card-content">
                <view class="card-info" v-if="loanType === 'borrower'">
                  <view class="info-item">
                    <text class="info-label">借款人：</text>
                    <text class="info-value">{{ contract.ourSideName }}</text>
                    <text class="info-label" style="width: 120rpx; margin-left: 20rpx;">出借人：</text>
                    <text class="info-value">{{ contract.otherName }}</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">合同金额：</text>
                    <text class="info-value highlight">{{ contract.amount }}元</text>
                    <text class="info-label" style="width: 120rpx; margin-left: 20rpx;">利率：</text>
                    <text class="info-value highlight">{{ contract.interestRate }}%</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">起始日期：</text>
                    <text class="info-value">{{ formatDate(contract.createTime) }}</text>
                  </view>
                </view>
                <view class="card-info" v-if="loanType === 'lender'">
                  <view class="info-item">
                    <text class="info-label">出借人：</text>
                    <text class="info-value">{{ contract.ourSideName }}</text>
                    <text class="info-label" style="width: 120rpx; margin-left: 20rpx;">借款人：</text>
                    <text class="info-value">{{ contract.otherName }}</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">合同金额：</text>
                    <text class="info-value highlight">{{ contract.amount }}元</text>
                    <text class="info-label" style="width: 120rpx; margin-left: 20rpx;">利率：</text>
                    <text class="info-value highlight">{{ contract.interestRate }}%</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">起始日期：</text>
                    <text class="info-value">{{ formatDate(contract.createTime) }}</text>
                  </view>
                </view>
              </view>
              <view class="card-footer">
                <!-- <view class="footer-button" v-if="contract.status === 0 && loanType === 'borrower'"
                  @click="toFace(contract)" style="display: flex; align-items: center; margin-right: 20rpx; color: #e96a25; border-color: #e96a25;"><u-icon name="edit-pen" color="#e96a25"></u-icon>去签署</view>
                <view class="footer-button" v-if="contract.status === 0 && loanType === 'lender'"
                  @click="toSignature(contract)" style="display: flex; align-items: center; margin-right: 20rpx; color: #e96a25; border-color: #e96a25;"><u-icon name="edit-pen" color="#e96a25"></u-icon>去签署</view>
                <view class="footer-button" v-if="contract.status === 6" @click="toPay(contract)"
                  style="margin-right: 20rpx;">去支付</view>
                <view class="footer-button" v-if="contract.borrowerSigned === 1 && contract.lenderSigned === 1"
                  @click="downloadContract(contract)" style="margin-right: 20rpx;">下载合同</view>
                <view class="footer-button" style="margin-right: 20rpx;" v-if="loanType === 'lender'" @click="cancelContract(contract)">取消合同</view>
                <view class="footer-button" @click="viewContract(contract.id)">查看详情</view> -->


                <view class="footer-button" v-if="contract.status === 0 && loanType === 'borrower'"
                  @click="toFace(contract)" style="display: flex; align-items: center; margin-right: 20rpx; color: #e96a25; border-color: #e96a25;"><u-icon name="edit-pen" color="#e96a25" style="margin-right: 6rpx;"></u-icon>去签署</view>
                <view class="footer-button" v-if="contract.status === 0 && loanType === 'lender'"
                  @click="toSignature(contract)" style="display: flex; align-items: center; margin-right: 20rpx; color: #e96a25; border-color: #e96a25;"><u-icon name="edit-pen" color="#e96a25" style="margin-right: 6rpx;"></u-icon>去签署</view>
                <view class="footer-button" v-if="contract.status === 6 && loanType === 'borrower'" @click="toPay(contract)" style="display: flex; align-items: center; margin-right: 20rpx; color: #0cb458; border-color: #0cb458;"><u-icon name="rmb-circle" color="#0cb458" style="margin-right: 6rpx;"></u-icon>去支付</view>
                <view class="footer-button" v-if="contract.borrowerSigned === 1 && contract.lenderSigned === 1"
                  @click="downloadContract(contract)" style="display: flex; align-items: center; margin-right: 20rpx; color: #b40c71; border-color: #b40c71;"><u-icon name="arrow-downward" color="#b40c71" style="margin-right: 6rpx;"></u-icon>下载合同</view>
                <view class="footer-button" v-if="loanType === 'lender' && contract.status !== 5" @click="cancelContract(contract)" style="display: flex; align-items: center; margin-right: 20rpx; color: #f62b2b; border-color: #f62b2b;"><u-icon name="trash" color="#f62b2b" style="margin-right: 6rpx;"></u-icon>取消合同</view>
                <view class="footer-button" @click="viewContract(contract.id)" style="display: flex; align-items: center; color: #4080ff; border-color: #4080ff;"><u-icon name="eye" color="#4080ff" style="margin-right: 6rpx;"></u-icon>查看详情</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item">
        <u-icon name="home" size="24" color="#999"></u-icon>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item active">
        <u-icon name="file-text" size="24" color="#4080ff"></u-icon>
        <text class="tab-text active">合同</text>
      </view>
      <view class="tab-item">
        <u-icon name="swap" size="24" color="#999"></u-icon>
        <text class="tab-text">往来</text>
      </view>
      <view class="tab-item">
        <u-icon name="account" size="24" color="#999"></u-icon>
        <text class="tab-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getSignContractList, socialAuthRedirect, cancelContract } from '@/api/user'
export default {
  data() {
    return {
      formParams: {
        "queryRole": "",
        "queryName": "",
        "queryStatus": "",
        "sortAmount": "",
        "sortCreateTime": "",
        "sortRepaymentType": ""
      },
      contracts: [],
      loading: true,
      activeTab: '',
      tabs: [{ value: '', name: '全部' }, { value: '6', name: '待支付' }, { value: '0', name: '待签署' }, { value: '1', name: '已签署' }, { value: '2', name: '已生效' }, { value: '3', name: '已逾期' }, { value: '4', name: '已还款' }, { value: '5', name: '已消条' }],
      loanType: 'borrower', // 'borrower' 表示借入，'lender' 表示借出  
      sortField: 'default',
      sortOrder: 'desc', // 'asc' 或 'desc'
      scrollViewHeight: '500px', // 默认高度，将在onReady中计算
      headerHeight: 0, // 固定头部高度
      totalAmount: 0,
      totalContract: 0,
      isIOS: false, // 是否是iOS设备
      needScrollReset: false // 是否需要重置滚动位置
    }
  },
  computed: {
    formatStatus() {
      return function (status) {
        if (status === 0) {
          return '待签署'
        } else if (status === 1) {
          return '已签署'
        } else if (status === 2) {
          return '已生效'
        } else if (status === 3) {
          return '已逾期'
        } else if (status === 4) {
          return '已还款'
        } else if (status === 5) {
          return '已消条'
        } else if (status === 6) {
          return '待支付'
        }
      }
    },
    formatDate() {
      return function (date) {
        // 将时间戳转换为日期格式 2025-05-24
        const d = new Date(date);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0'); // 月份从0开始
        const day = String(d.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      }
    },
    sortedContracts() {
      // 根据排序字段和排序顺序对合同进行排序
      const sortedList = [...this.contracts];

      if (this.sortField === 'default') {
        // 默认排序，按ID排序
        sortedList.sort((a, b) => {
          return this.sortOrder === 'asc' ? a.id - b.id : b.id - a.id;
        });
      } else if (this.sortField === 'amount') {
        // 按金额排序
        sortedList.sort((a, b) => {
          return this.sortOrder === 'asc' ? a.amount - b.amount : b.amount - a.amount;
        });
      } else if (this.sortField === 'createTime') {
        // 按起始日期排序
        sortedList.sort((a, b) => {
          const dateA = new Date(a.createTime);
          const dateB = new Date(b.createTime);
          return this.sortOrder === 'asc' ? dateA - dateB : dateB - dateA;
        });
      }

      return sortedList;
    }
  },
  onLoad() {
    // 检测是否是iOS设备
    const sysInfo = uni.getSystemInfoSync();
    this.isIOS = sysInfo.platform === 'ios';
    this.getSignContractListFn();
  },
  onReady() {
    this.initPageLayout();
  },
  // 添加onShow生命周期，处理返回页面的情况
  onShow() {
    if (this.needScrollReset) {
      // 页面显示时重新计算高度并重置滚动位置
      setTimeout(() => {
        this.initPageLayout();
        // 重置滚动位置到顶部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        });
        this.needScrollReset = false;
      }, 100);
    }
  },
  // 添加onHide生命周期，标记页面即将隐藏
  onHide() {
    // 当页面隐藏时，标记需要重置滚动位置
    if (this.isIOS) {
      this.needScrollReset = true;
    }
  },
  methods: {
    // 添加一个统一的初始化页面布局的方法
    initPageLayout() {
      // 获取固定头部高度
      this.getHeaderHeight();
      // 计算滚动区域的高度
      this.calculateScrollViewHeight();
    },
    cancelContract(data) {
      console.log(data)
      // 弹出确认框
      uni.showModal({
        title: '提示',
        content: '确定取消合同吗？',
        success: (res) => {
          if (res.confirm) {
            cancelContract({ contractId: data.id }).then(res => {
              console.log(res)
              uni.showToast({
                  title: '取消合同成功',
                  icon: 'success'
                })
                this.getSignContractListFn()
            })
          }
        }
      })
    },
    downloadContract(data) {
      console.debug(data)
      // data.filePath 是合同pdf文件的url http://s10.v100.vip:30711/admin-api/infra/file/29/get/20250526/6f94f38cee1e99b32cae4bdf5d943d8991691a13f6a3eef080c218fe66410173_1748214795121.pdf
      if (!data.filePath) {
        uni.showToast({
          title: '文件路径不存在',
          icon: 'none'
        });
        return;
      }

      const link = document.createElement('a');
      link.href = data.filePath;
      // 尝试从URL中提取文件名，或者您可以设置一个默认的文件名
      const fileName = data.filePath.substring(data.filePath.lastIndexOf('/') + 1);
      link.download = fileName || 'contract.pdf';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    toSignature(data) {
      console.log(data.id)
      uni.navigateTo({
        url: '/pages/loan/signature?contractId=' + data.id + '&signatureType=lender'
      })
    },
    toFace(data) {
      console.log(data.id)
      uni.navigateTo({
        url: '/pages/face/index?contractId=' + data.id + '&name=borrower'
      })
    },
    socialAuthRedirect() {
      socialAuthRedirect({
        type: '31',
        redirectUri: `${window.location.origin}/pages/pay/index`
      }).then(res => {
        window.location = res.data.data
      })
    },
    toPay(data) {
      console.log(data)
      // 跳转支付页面
      uni.setStorageSync('orderId', data.orderId)
      uni.setStorageSync('contractId', data.id)
      this.socialAuthRedirect()
      // uni.navigateTo({
      //   url: '/pages/pay/index?contractId=' + data.id + '&orderId=' + data.orderId
      // })
    },
    getSignContractListFn() {
      this.formParams.queryStatus = this.activeTab
      this.formParams.queryRole = this.loanType
      getSignContractList(this.formParams).then(res => {
        console.log(res)
        this.contracts = res.data.data.contractDataLists
        this.totalAmount = res.data.data.totalAmount
        this.totalContract = res.data.data.totalContract
        this.loading = false
      })
    },
    // 获取固定头部高度
    getHeaderHeight() {
      const that = this;
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.fixed-header').boundingClientRect(data => {
          if (data) {
            that.headerHeight = data.height;
          }
        }).exec();
      }, 50);
    },

    // 计算滚动区域的高度
    calculateScrollViewHeight() {
      const that = this;
      setTimeout(() => {
        const sysInfo = uni.getSystemInfoSync();
        const windowHeight = sysInfo.windowHeight;
        
        const query = uni.createSelectorQuery().in(this);
        query.select('.tab-bar').boundingClientRect();
        query.select('.fixed-header').boundingClientRect();
        query.exec(function (res) {
          if (res[0] && res[1]) {
            const tabBarHeight = res[0].height;
            const headerHeight = res[1].height;
            // 窗口高度减去底部导航栏高度和顶部固定区域高度
            const scrollHeight = windowHeight - tabBarHeight - headerHeight;
            that.scrollViewHeight = scrollHeight + 'px';
          }
        });
      }, 50);
    },

    // 切换标签
    switchTab(tab) {
      if (this.activeTab === tab) return;

      this.activeTab = tab;
      // 根据选中的标签加载相应数据
      this.loading = true;
      this.getSignContractListFn()
    },

    // 排序方法
    sortBy(field) {
      console.log(field)
      if (this.sortField === field) {
        // 如果点击的是当前排序字段，则切换排序顺序
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        // 如果点击的是新字段，则设置为降序
        this.sortField = field;
        this.sortOrder = 'desc';
      }
    },

    // 切换借入/借出
    toggleLoanType(type) {
      if (this.loanType === type) return;

      this.loanType = type;
      // 重新加载数据
      this.loading = true;
      this.getSignContractListFn()
    },

    // 搜索方法
    search() {
      // 实现搜索逻辑
      this.loading = true;
      this.getSignContractListFn()
    },


    // 查看合同详情
    viewContract(id) {
      if (this.isIOS) {
        this.needScrollReset = true;
      }
      uni.navigateTo({
        url: '/pages/contract/detail?id=' + id
      })
    }
  }
}
</script>

<style lang="scss">
.contract-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

// 固定头部区域
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

// 内容区域
.content-area {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;

  .header-placeholder {
    width: 100%;
  }
}

// 顶部导航区域样式
.top-nav-area {
  background-color: #4080ff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .toggle-buttons {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 30rpx;
    display: flex;
    width: 300rpx;
    height: 60rpx;
    margin: 0 auto;

    .toggle-button {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 28rpx;
      border-radius: 30rpx;

      &.active {
        background-color: #fff;
        color: #4080ff;
      }
    }
  }

  .delete-btn {
    width: 50rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 选项卡导航样式
.tabs-nav {
  background-color: #4080ff;
  display: flex;
  padding: 0 20rpx 20rpx;
  white-space: nowrap;

  .tab-item {
    display: inline-block;
    padding: 10rpx 30rpx;
    color: rgba(255, 255, 255, 0.7);
    font-size: 26rpx;
    position: relative;

    &.active {
      color: #fff;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background-color: #fff;
        border-radius: 3rpx;
      }
    }
  }
}

// 排序区域样式
.sort-area {
  background-color: #fff;
  display: flex;
  padding: 15rpx 0;

  .sort-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #666;

    text {
      margin-right: 6rpx;
    }

    .arrow-down,
    .arrow {
      font-size: 20rpx;
      color: #999;
      margin-left: 4rpx;

      &.arrow-up {
        transform: rotate(180deg);
      }

      &.active {
        color: #4080ff;
      }
    }
  }
}

// 搜索框样式
.search-box {
  padding: 20rpx 30rpx;
  background-color: #fff;

  .search-input {
    background-color: #f5f5f5;
    border-radius: 30rpx;
    height: 70rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
}

// 合同统计信息样式
.contract-stats {
  margin: 20rpx 30rpx;
  background-color: #f5f7fa;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .stats-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .stats-label {
      font-size: 28rpx;
      color: #666;
      margin-right: 10rpx;
    }

    .stats-value {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-right: 6rpx;
    }

    .stats-unit {
      font-size: 24rpx;
      color: #666;
    }
  }

  .stats-divider {
    width: 2rpx;
    height: 40rpx;
    background-color: #ddd;
  }
}

// 可滚动内容区域
.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 增加iOS流畅滚动 */
  position: relative;
}

// 合同列表样式
.contract-list {
  padding: 20rpx 30rpx;

  .loading-text {
    color: #999;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100rpx;

    text {
      margin-left: 10rpx;
    }
  }

  .empty-state {
    margin-top: 100rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .empty-icon {
      margin-bottom: 20rpx;
    }

    .empty-text {
      font-size: 28rpx;
      color: #909399;
    }
  }

  .contract-cards {
    width: 100%;

    .contract-card {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .card-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          display: flex;
          align-items: center;
        }

        .card-status {
          font-size: 24rpx;
          padding: 6rpx 16rpx;
          border-radius: 20rpx;

          &.status-pending {
            background-color: #e6f7ff;
            color: #1890ff;
          }

          &.status-repayment {
            background-color: #f6ffed;
            color: #52c41a;
          }

          &.status-overdue {
            background-color: #fff2f0;
            color: #ff4d4f;
          }

          &.status-completed {
            background-color: #f5f5f5;
            color: #666;
          }
        }
      }

      .card-content {
        .card-info {
          .info-item {
            display: flex;
            margin-bottom: 16rpx;
            font-size: 28rpx;

            .info-label {
              color: #999;
              width: 160rpx;
              flex-shrink: 0;
            }

            .info-value {
              color: #333;
              flex: 1;

              &.highlight {
                color: #ff6b00;
                font-weight: bold;
              }
            }
          }
        }
      }

      .card-footer {
        margin-top: 20rpx;
        display: flex;
        justify-content: flex-end;

        .footer-button {
          font-size: 26rpx;
          color: #4080ff;
          padding: 10rpx 20rpx;
          border: 1rpx solid #4080ff;
          border-radius: 30rpx;
        }
      }
    }
  }

  .load-more,
  .no-more {
    text-align: center;
    padding: 20rpx 0;
    color: #999;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    text {
      margin-left: 10rpx;
    }
  }
}

// 底部导航栏样式
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #eee;
  z-index: 100;

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tab-text {
      font-size: 24rpx;
      color: #999;
      margin-top: 6rpx;

      &.active {
        color: #4080ff;
      }
    }
  }
}

// 修改滚动条样式
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>
